﻿@page "/messages"

<h3>Message 消息提示</h3>

<h4>常用于主动操作后的反馈提示。与 Toast 的区别是后者更多用于系统级通知的被动提醒</h4>

<Block Title="基础用法" Introduction="从顶部出现，4 秒后自动消失">
    <button class="btn btn-primary" @onclick="@ShowMessage">打开消息提示</button>
</Block>

<Block Title="带图标的消息框" Introduction="通过设置 <code>MessageOption</code> 的 <code>Icon</code> 属性，更改消息框左侧小图标">
    <button class="btn btn-primary" @onclick="@ShowIconMessage">打开消息提示</button>
</Block>

<Block Title="带关闭按钮的消息框" Introduction="通过设置 <code>MessageOption</code> 的 <code>ShowDismiss</code> 属性，更改消息框右侧出现关闭按钮">
    <button class="btn btn-primary" @onclick="@ShowCloseMessage">打开消息提示</button>
</Block>

<Block Title="左侧带边框的消息框" Introduction="通过设置 <code>MessageOption</code> 的 <code>ShowBar</code> 属性，更改消息框左侧边框样式">
    <button class="btn btn-primary" @onclick="@ShowBarMessage">打开消息提示</button>
</Block>

<Block Title="不同颜色的消息框" Introduction="通过设置 <code>MessageOption</code> 的 <code>Color</code> 属性，更改消息框颜色">
    <div class="row g-3">
        <div class="col-6 col-sm-auto">
            <button class="btn btn-primary" @onclick="@(e => ShowColorMessage(Color.Primary))">Primary 消息</button>
        </div>
        <div class="col-6 col-sm-auto">
            <button class="btn btn-success" @onclick="@(e => ShowColorMessage(Color.Success))">Success 消息</button>
        </div>
        <div class="col-6 col-sm-auto">
            <button class="btn btn-info" @onclick="@(e => ShowColorMessage(Color.Info))">Info 消息</button>
        </div>
        <div class="col-6 col-sm-auto">
            <button class="btn btn-danger" @onclick="@(e => ShowColorMessage(Color.Danger))">Danger 消息</button>
        </div>
        <div class="col-6 col-sm-auto">
            <button class="btn btn-warning" @onclick="@(e => ShowColorMessage(Color.Warning))">Warning 消息</button>
        </div>
        <div class="col-6 col-sm-auto">
            <button class="btn btn-secondary" @onclick="@(e => ShowColorMessage(Color.Secondary))">Secondary 消息</button>
        </div>
    </div>
</Block>

<Block Title="消息框弹出位置" Introduction="通过设置 <code>Message</code> 组件的 <code>Placement</code> 属性，更改消息框弹出位置">
    <button class="btn btn-primary" @onclick="@ShowBottomMessage">打开消息提示</button>
</Block>

<Tips class="mt-3">
    <p>
        <code>Message</code> 组件使用了全局组件，需要再使用本组件的页面或者全局组件中内置本组件，示例代码如下：
    </p>
</Tips>

<Pre>&lt;Message /&gt;</Pre>

<Message @ref="MessageElement" />

<AttributeTable Items="@GetAttributes()" />

<AttributeTable Title="MessageItem 属性" Items="@GetMessageItemAttributes()" />
